import QtQuick 2.15
import QtQuick.Controls 2.15
import "qrc:/components"

ApplicationWindow {
    id: root
    width: 1600
    height: 2560
    visible: true
    
    property real progressValue: 50

    Rectangle {
        anchors.fill: parent
        color: "#000000"
        
        ScrollView {
            anchors.fill: parent
            contentWidth: width
            clip: true
            
            Column {
                width: parent.width
                spacing: 40
                topPadding: 40
                bottomPadding: 40
                leftPadding: 40
                rightPadding: 40
                
                // 标题
                Text {
                    width: parent.width
                    text: "进度条展示"
                    color: "white"
                    font.pixelSize: 48
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                }
                
                // 动画进度条
                Column {
                    width: parent.width
                    spacing: 10
                    
                    Text {
                        width: parent.width
                        text: "动画进度条"
                        color: "white"
                        font.pixelSize: 28
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    AnimatedProgressBar {
                        width: parent.width * 0.9
                        height: 40
                        value: progressValue
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                
                // 渐变进度条
                Column {
                    width: parent.width
                    spacing: 10
                    
                    Text {
                        width: parent.width
                        text: "渐变进度条"
                        color: "white"
                        font.pixelSize: 28
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    GradientProgressBar {
                        width: parent.width * 0.9
                        height: 40
                        value: progressValue
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                
                // 呼吸进度条
                Column {
                    width: parent.width
                    spacing: 10
                    
                    Text {
                        width: parent.width
                        text: "呼吸进度条"
                        color: "white"
                        font.pixelSize: 28
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    BreathingProgressBar {
                        width: parent.width * 0.9
                        height: 40
                        value: progressValue
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                
                // 垂直末端进度条
                Column {
                    width: parent.width
                    spacing: 10
                    
                    Text {
                        width: parent.width
                        text: "垂直末端进度条"
                        color: "white"
                        font.pixelSize: 28
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    VerticalEndProgressBar {
                        width: parent.width * 0.9
                        height: 40
                        value: progressValue
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                
                // 进度条网格布局（2行3列）
                Column {
                    width: parent.width
                    spacing: 20
                    
                    // 第一行：3个进度条
                    Row {
                        width: parent.width
                        spacing: 20
                        
                        Column {
                            width: (parent.width - 40) / 3
                            spacing: 10
                        
                        Text {
                                width: parent.width
                                text: "水波纹(矩形)"
                            color: "white"
                                font.pixelSize: 20
                                horizontalAlignment: Text.AlignHCenter
                        }
                            
                            Item {
                                width: parent.width
                                height: 141
                        
                        WaterProgressBar {
                                    width: 171
                                    height: 141
                                    anchors.centerIn: parent
                                    value: progressValue
                            isCircle: false
                                }
                        }
                    }
                    
                    Column {
                            width: (parent.width - 40) / 3
                        spacing: 10
                        
                        Text {
                                width: parent.width
                                text: "水波纹(圆形)"
                            color: "white"
                                font.pixelSize: 20
                                horizontalAlignment: Text.AlignHCenter
                        }
                            
                            Item {
                                width: parent.width
                                height: 141
                        
                        WaterProgressBar {
                                    width: 171
                                    height: 141
                                    anchors.centerIn: parent
                                    value: progressValue
                            isCircle: true
                        }
                    }
                }
                    
                    Column {
                            width: (parent.width - 40) / 3
                        spacing: 10
                        
                        Text {
                                width: parent.width
                                text: "圆形进度条"
                            color: "white"
                                font.pixelSize: 20
                                horizontalAlignment: Text.AlignHCenter
                        }
                            
                            Item {
                                width: parent.width
                                height: 141
                        
                        RoundProgressBar {
                                    width: 171
                                    height: 141
                                    anchors.centerIn: parent
                                    value: progressValue
                                    barStyle: 0  // Donut
                                }
                            }
                        }
                    }
                    
                    // 第二行：2个进度条
                    Row {
                        width: parent.width
                        spacing: 20
                        
                        Column {
                            width: (parent.width - 40) / 3
                            spacing: 10
                        
                        Text {
                                width: parent.width
                                text: "圆形进度条(Pie)"
                            color: "white"
                                font.pixelSize: 20
                                horizontalAlignment: Text.AlignHCenter
                        }
                            
                            Item {
                                width: parent.width
                                height: 150
                        
                        RoundProgressBar {
                                    width: 150
                                    height: 150
                                    anchors.centerIn: parent
                                    value: progressValue
                                    barStyle: 1  // Pie
                            progressColor: "#FF42D5"
                        }
                    }
                }
                
                Column {
                            width: (parent.width - 40) / 3
                    spacing: 10
                    
                    Text {
                                width: parent.width
                        text: "电池进度条"
                        color: "white"
                                font.pixelSize: 20
                                horizontalAlignment: Text.AlignHCenter
                    }
                            
                            Item {
                                width: parent.width
                                height: 121
                    
                    BatteryProgressBar {
                                    width: 321
                                    height: 121
                                    anchors.centerIn: parent
                                    value: progressValue
                                }
                            }
                        }
                        
                        // 空位占位
                        Item {
                            width: (parent.width - 40) / 3
                            height: 1
                        }
                    }
                }
                
                // PK进度条
                Column {
                    width: parent.width
                    spacing: 10
                    
                    Text {
                        width: parent.width
                        text: "PK进度条"
                        color: "white"
                        font.pixelSize: 28
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    PKProgressBar {
                        width: parent.width * 0.9
                        height: 50
                        value: progressValue
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                
                // 进度值显示和控制
                Column {
                    width: parent.width
                    spacing: 20
                    
                    Text {
                        width: parent.width
                        text: Math.round(progressValue) + "%"
                        color: "white"
                        font.pixelSize: 36
                        horizontalAlignment: Text.AlignHCenter
                    }
                    
                    // 控制按钮
                    Item {
                        width: parent.width
                        height: 41
                        
                        Row {
                            anchors.centerIn: parent
                            spacing: 20
                            
                            Button {
                                id: plusButton
                                width: 75
                                height: 41
                                text: "+"
                                background: Rectangle {
                                    color: "#01EEC3"
                                    radius: 16
                                }
                                contentItem: Text {
                            text: "+"
                                    color: "#212426"
                            font.pixelSize: 24
                            font.bold: true
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                }
                                onClicked: {
                                    progressValue = Math.min(progressValue + 1, 100)
                                }
                            }
                            
                            Button {
                                id: minusButton
                                width: 75
                                height: 41
                                text: "-"
                                background: Rectangle {
                                    color: "#01EEC3"
                                    radius: 16
                                }
                                contentItem: Text {
                                    text: "-"
                                    color: "#212426"
                                    font.pixelSize: 24
                                    font.bold: true
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                }
                            onClicked: {
                                    progressValue = Math.max(progressValue - 1, 0)
                            }
                        }
                    }
                    }
                    
                    // 滑块控制
                    Slider {
                        width: parent.width * 0.9
                        from: 0
                        to: 100
                        value: progressValue
                        anchors.horizontalCenter: parent.horizontalCenter
                        onValueChanged: {
                            progressValue = value
                        }
                    }
                }
                
                // 底部间距
                Item {
                    width: parent.width
                    height: 40
                    }
            }
        }
    }
}
